<template>
    <div class='examine'>
        <div v-if='first' class='oneExamine'>
            <div  class='firstBox'>
                <el-form :label-position="labelPosition" label-width="100px">
                    <el-form-item label="发行商">
                        <el-select
                            class='fixedWidth'
                            :disabled='disabled' v-model="formLabelAlign.targetUserId" placeholder="请选择发行商">
                            <el-option
                            v-for="item in issueList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="项目名称">
                        <el-input
                            class='fixedWidth'
                            :disabled='disabled' v-model="formLabelAlign.title" maxlength="24" placeholder='请输入项目名称'></el-input>
                    </el-form-item>
                    <el-form-item label="影视类型">
                        <el-select
                            class='fixedWidth'
                            :disabled='disabled' v-model="formLabelAlign.type" placeholder="请选择影视类型">
                            <el-option
                            v-for="item in movieType"
                            :key="item.value"
                            :label="item.text"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="融资进度">
                        <div class='financing'>
                            <el-select v-model="formLabelAlign.status" placeholder="请选择融资状态">
                                <el-option
                                v-for="item in status"
                                :key="item.value"
                                :label="item.text"
                                :value="item.value">
                                </el-option>
                            </el-select>
                            <div v-if='formLabelAlign.status !== beforeForm.status'>
                                <p>
                                    <span>修改前:</span>
                                    <span>{{getbeforeStatus()}}</span>
                                </p>
                            </div>
                        </div>
                            
                    </el-form-item>
                    <el-form-item label="上映状态">
                        <div class='financing'>
                        <el-select v-model="formLabelAlign.releaseStatus" placeholder="请选择上映状态">
                            <el-option
                            v-for="item in release"
                            :key="item.value"
                            :label="item.text"
                            :value="item.value">
                            </el-option>
                        </el-select>
                         <div v-if='formLabelAlign.releaseStatus !== beforeForm.releaseStatus'>
                                <p>
                                    <span>修改前:</span>
                                    <span>{{getbeforereleaseStatus()}}</span>
                                </p>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="融资金额">
                        <div class='moneyItem'>
                            <el-input
                                :disabled='disabled'
                                @change='changeNumber()'
                                v-model="formLabelAlign.totalOfMoney" 
                                placeholder="请输入融资金额，需最低10W且需为1W的倍数"></el-input>
                            <span>元</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="单份价格">
                        <div class='moneyItem financing'>
                            <div class='item'>
                                <el-input
                                class='priceOfUnit'
                                @change='changeNumber()'
                                v-model="formLabelAlign.priceOfUnit" 
                                placeholder="请输入单份价格，需100的倍数"></el-input>
                                <span>元/份</span>
                            </div>
                            <div class='item' v-if='formLabelAlign.priceOfUnit !== beforeForm.priceOfUnit'>
                                <p>
                                    <span>修改前:</span>
                                    <span>{{beforeForm.priceOfUnit}}</span>
                                </p>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="项目份数">
                        <div class='moneyItem'>
                            <el-input 
                                :disabled='disabled'
                                v-model="numberItems" 
                                placeholder="请输入项目份数"></el-input> 
                            <span>份</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="限购数量">
                        <div class='financing'>
                            <el-input v-model="formLabelAlign.userLimit" placeholder="请输入限购数量"></el-input>
                            <div v-if='formLabelAlign.userLimit !== beforeForm.userLimit'>
                                <p>
                                    <span>修改前:</span>
                                    <span>{{beforeForm.userLimit}}</span>
                                </p>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="线下订金">
                        <div class='financing'>
                        <el-input v-model="formLabelAlign.deposit" placeholder="请输入线下订金"></el-input>
                            <div v-if='formLabelAlign.deposit !== beforeForm.deposit'>
                                <p>
                                    <span>修改前:</span>
                                    <span>{{beforeForm.deposit}}</span>
                                </p>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="简介">
                        <div class='financing'>
                            <el-input 
                                :autosize="{ minRows: 2, maxRows: 4}"
                                v-model="formLabelAlign.subtitle"  
                                placeholder="请输入简介，20字以内"
                                maxlength="20"
                                type='textarea'>
                            </el-input>
                            <div v-if='formLabelAlign.subtitle !== beforeForm.subtitle' class='textareaDiv'>
                                <p>
                                    <span>修改前:</span>
                                    <el-input 
                                        :autosize="{ minRows: 2, maxRows: 4}"
                                        v-model="beforeForm.subtitle"  
                                        placeholder="请输入简介，20字以内"
                                        maxlength="20"
                                        type='textarea'>
                                    </el-input>
                                </p>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="收益说明">
                        <div class='financing'>
                            <el-input 
                                :autosize="{ minRows: 2, maxRows: 4}"
                                type='textarea'
                                maxlength="20"
                                placeholder="请输入收益说明，20字以内"
                                v-model="formLabelAlign.incomeDetail">
                            </el-input>
                            <div v-if='formLabelAlign.incomeDetail !== beforeForm.incomeDetail' class='textareaDiv'>
                                <p>
                                    <span>修改前:</span>
                                    <el-input 
                                        :autosize="{ minRows: 2, maxRows: 4}"
                                        v-model="beforeForm.incomeDetail"  
                                        placeholder="请输入收益说明，20字以内"
                                        maxlength="20"
                                        type='textarea'>
                                    </el-input>
                                </p>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="风险提示">
                        <div class='financing'>
                            <el-input 
                                :autosize="{ minRows: 2, maxRows: 4}"
                                type='textarea'
                                maxlength="500"
                                placeholder="请输入风险提示，500字以内"
                                v-model="formLabelAlign.riskWarning"
                            ></el-input>
                            <div v-if='formLabelAlign.riskWarning !== beforeForm.riskWarning' class='textareaDiv'>
                                <p>
                                    <span>修改前:</span>
                                    <el-input 
                                        :autosize="{ minRows: 2, maxRows: 4}"
                                        v-model="beforeForm.riskWarning"  
                                        placeholder="请输入风险提示，500字以内"
                                        maxlength="20"
                                        type='textarea'>
                                    </el-input>
                                </p>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="是否下线">
                        <div class='financing'>
                            <el-radio-group v-model="formLabelAlign.disable">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                            <div v-if='formLabelAlign.disable !== beforeForm.disable'>
                                <p>
                                    <span>修改前:</span>
                                    <span v-text="beforeForm.disable ? '是' : '否'"></span>
                                </p>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="排序值">
                        <div class='financing'>
                        <el-input v-model="formLabelAlign.queue" placeholder="请输入排序值"></el-input>
                        <!-- <div v-if='formLabelAlign.queue !== beforeForm.queue'>
                                <p>
                                    <span>修改前:</span>
                                    <span>{{beforeForm.queue}}</span>
                                </p>
                            </div> -->
                        </div>
                    </el-form-item>
                    <el-form-item class='cover' label="项目封面">
                        <div class='financing'>
                            <div class='upload'>
                                <el-upload
                                    class="upload-demo"
                                    :action='uploadAction'
                                    :show-file-list="false"
                                    name='userfile'
                                    :on-success="handleAvatarSuccess">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                    <div slot="tip" class="el-upload__tip">上传项目封面，340x458宽高大小</div>
                                </el-upload>
                                <div v-if="coverImageSatus" class='imgBox'>
                                    <img :src="formLabelAlign.coverImage" alt="">
                                </div>
                            </div>
                            <div v-if='formLabelAlign.coverImage !== beforeForm.coverImage' class='changeUpload'>
                                <p>
                                    <span>修改前:</span>
                                </p>
                                <div class='imgBox'>
                                    <img :src="beforeForm.coverImage" alt="">
                                </div>
                            </div>
                            
                        </div>
                        
                        
                    </el-form-item>
                    <el-form-item label="轮播图">
                        <div class='financing'>
                            <div class='upload'>
                                <el-upload
                                    class="upload-demo"
                                    :action='uploadAction'
                                    name='userfile'
                                    :show-file-list="false"
                                    :on-success="handleRotationSuccess">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                    <div slot="tip" class="el-upload__tip">上传项目轮播图，360x670宽高大小，5张以内</div>
                                </el-upload>
                                <div v-if='carouselStatus' class='rotationList'>
                                    <div v-for='(item,index) in formLabelAlign.carousels' :key='index' class='imgList'>
                                        <div>
                                            <img :src="item" alt="">
                                        </div>
                                        <!-- <p @click='delRotation(item,index)'>删除</p> -->
                                    </div>
                                </div>
                            </div>
                            <div v-if='JSON.stringify(formLabelAlign.carousels) !== JSON.stringify(beforeForm.carousels)' class='changeUpload'>
                                <p>
                                    <span>修改前:</span>
                                </p>
                                <div v-if='carouselStatus' class='rotationList'>
                                    <div v-for='(item,index) in beforeForm.carousels' :key='index' class='imgList'>
                                        <div>
                                            <img :src="item" alt="">
                                        </div>
                                        <!-- <p @click='delRotation(item,index)'>删除</p> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            
             <el-button @click='next()' type="primary">下一步</el-button>
        </div>
        <div class='tinymceBox' v-if='second'>
            <Tinymce :height='400' ref="editor" v-model="formLabelAlign.content"/>

            <div v-if='formLabelAlign.content !== beforeForm.content' class='modification'>
                <p>修改前:</p>
                <Tinymce :height='400' ref="editor" v-model="beforeForm.content"/>
            </div>
            <div class='btn'>
                <el-button @click='upSecond()' type="primary">上一步</el-button>
                <el-button @click='nextSecond()' type="primary">下一步</el-button>
            </div>
        </div>

        <div class='tinymceBox' v-show='three'>
            <threeTinymce ref="threeTinymce"></threeTinymce>
            <div class='btn'>
                <el-button @click='goAdopt' class='adopt' type="primary">通过</el-button>
                <el-button @click='refuse' type="danger">拒绝</el-button>
                <el-button @click='reviousrevious' type="text">上一步</el-button>
            </div>
        </div>


        <el-dialog :visible.sync="aportDialogVisible" width="20%">
            <span>确认通过审核吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取 消</el-button>
                <el-button type="primary" @click="sure()">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog :visible.sync="refuseDialogVisible" width="20%">
            <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入拒绝原因"
                v-model="checkParams.failedReason"
            ></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelrefuse()">取 消</el-button>
                <el-button type="primary" @click="surerefuse()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>


<script>
import {ajax} from '@/api'
import Tinymce from '@/components/Tinymce'
import {getToken} from "@/utils/auth";
import numberFormat from '@/api/numberFormat';
import threeTinymce from './threeTinymce';
export default {
    name:'addProjectIndex',
    data(){
        return {
            aportDialogVisible: false,
            refuseDialogVisible: false,
            coverImageSatus:false,
            carouselStatus:false,
            numberItems:'',
            uploadAction: process.env.BASE_API + "file.upload",
            first:true,
            second:false,
            three:false,
            disabled:true,
            issueList:'',    //发行商列表
            movieType:vars.movieType,//影视类型
            status:vars.movieStatus,//融资状态
            release:vars.movieReleaseStatus,//上映状态
            releaseStatus:[{   //发布状态
                value:'是',
                text:'是'
            },{
                value:'否',
                text:'否'
            }],
            labelPosition:'left',
            users:'',
            formLabelAlign:{
                movieId:'',
                targetUserId:'',
                type:'',
                status:'',
                releaseStatus:'',
                title:'',
                subtitle:'',
                totalOfMoney:'',
                priceOfUnit:'',
                userLimit:'',
                contractDetail:'',
                coverImage:'',
                carousels:[],
                content:'',
                incomeDetail:'',
                riskWarning:'',
                disable:false,
                queue:'',
                token:getToken()
            },
            beforeForm:{   //修改之前的数据
                status:'',
                releaseStatus:'',
                userLimit:'',
                deposit:'',
                priceOfUnit:'',
                subtitle:'',
                incomeDetail:'',
                riskWarning:'',
                disable:'',
                contractDetail:'',
                queue:'',
                coverImage:'',
                carousels:[],
                content:''
            },
            params: {
                targetId: "",
                token: getToken()
            },
            activityForm:{
                content:''
            },
            listParams:{
                role:'issue',
                auth:0,
                keyword:'',
                start:0,
                limit:100,
                token:getToken()
            },
            infoData:{},
            checkParams:{
                movieId:'',
                success:'',
                failedReason:'',
                token:getToken()
            }
        }
    },
    methods:{
        //验证是否为数字和正整数
        isNumber(number){
            let re = /^[0-9]+.?[0-9]*$/;
            let integer = /^[1-9]+[0-9]*]*$/;
            let num = number;
        　　if (!re.test(num)) {
        　　　　return this.$message.error("请输入数字");
        　　}

            if (!integer.test(num)) {
        　　　　return this.$message.error("请输入正整数");
        　　}else{
               return true;
            }
        },
        getbeforeStatus(){
            for(let i = 0;i < this.status.length;i++){
                if(this.status[i].value === this.beforeForm.status){
                    return this.status[i].text;
                }
            }
        },
        getbeforereleaseStatus(){
            for(let i = 0;i < this.release.length;i++){
                if(this.release[i].value === this.beforeForm.releaseStatus){
                    return this.release[i].text;
                }
            }
        },
        //获得项目详细信息
        getData() {
            this.params.targetId = this.$route.params.movieId;
            ajax("movieDetailForManager", this.params).then(res => {
                console.log(res);
                // checkInfo 新数据   info 老数据
                if (res.data.status) {
                    let list = res.data.data;
                    let oldData = res.data.data.info;
                    this.salesMoney = res.data.salesOfMoney;
                    this.formLabelAlign.movieId = list.id;
                    this.formLabelAlign.targetUserId = list.userId;
                    this.formLabelAlign.type = list.type.value;
                    this.formLabelAlign.status = list.checkInfo.movieStatus.value;
                    this.finacingProgress = list.checkInfo.movieStatus.value;
                    this.formLabelAlign.releaseStatus = list.checkInfo.releaseStatus.value;
                    this.releaseStatus = list.checkInfo.releaseStatus.value;
                    this.formLabelAlign.title = list.checkInfo.title;
                    this.formLabelAlign.subtitle = list.checkInfo.subtitle;
                     this.formLabelAlign.totalOfMoney = numberFormat.showDecimal(list.totalOfMoney);
                    this.formLabelAlign.priceOfUnit = numberFormat.showDecimal(list.checkInfo.priceOfUnit);
                    this.numberItems = numberFormat.showDecimal(list.totalOfMoney) / numberFormat.showDecimal(list.checkInfo.priceOfUnit);
                    this.formLabelAlign.userLimit = list.checkInfo.userLimit;
                    if(list.checkInfo.deposit === 0){
                        this.formLabelAlign.deposit = '';
                    }else{
                        this.formLabelAlign.deposit =  numberFormat.showDecimal(list.checkInfo.deposit);
                    }

                    this.formLabelAlign.contractDetail = list.checkInfo.contractDetail;
                    this.coverImageSatus = true;
                    this.carouselStatus = true;
                    this.formLabelAlign.coverImage = list.checkInfo.coverImage;
                    this.formLabelAlign.carousels = list.checkInfo.carousels;
                    this.formLabelAlign.incomeDetail = list.checkInfo.incomeDetail;
                    this.formLabelAlign.riskWarning = list.checkInfo.riskWarning;
                    if(list.disable === 0){
                        this.formLabelAlign.disable = false;
                    }else{
                        this.formLabelAlign.disable = true;
                    }
                    this.formLabelAlign.queue = list.queue;
                    this.formLabelAlign.content = list.checkInfo.content;

                    this.users = res.data.user;
                    //修改前
                    this.beforeForm = {   
                        status:list.status.value,
                        releaseStatus:list.releaseStatus.value,
                        userLimit:oldData.userLimit,
                        deposit:'',
                        priceOfUnit:numberFormat.showDecimal(oldData.priceOfUnit),
                        subtitle:oldData.subtitle,
                        incomeDetail:oldData.incomeDetail,
                        riskWarning:oldData.riskWarning,
                        disable:'',
                        contractDetail:oldData.contractDetail,
                        queue:oldData.queue,
                        coverImage:oldData.coverImage,
                        carousels:oldData.carousels,
                        content:oldData.content
                    };

                    if(oldData.deposit === 0){
                        this.beforeForm.deposit = '';
                    }else{
                        this.beforeForm.deposit = numberFormat.showDecimal(oldData.deposit);
                    }

                    if(oldData.disable === 0){
                        this.beforeForm.disable = false;
                    }else{
                        this.beforeForm.disable = true;
                    }
                }
            });
        },
        changeNumber(){
            console.log(this.formLabelAlign.totalOfMoney,this.formLabelAlign.priceOfUnit);
            //自动计算出项目份数
            if(Number(this.formLabelAlign.totalOfMoney) !== '' && Number(this.formLabelAlign.priceOfUnit) !== ''){
                if(this.isNumber(Number(this.formLabelAlign.totalOfMoney)) && this.isNumber(Number(this.formLabelAlign.priceOfUnit))){
                  this.numberItems = parseInt(Number(this.formLabelAlign.totalOfMoney) / Number(this.formLabelAlign.priceOfUnit));
                }
            }
        },
        upSecond(){
            this.first = true;
            this.second = false;
        },
        nextSecond(){
            this.second = false;
            this.three = true;
            this.$refs.threeTinymce.openThreeStatus(this.formLabelAlign.contractDetail,this.beforeForm.contractDetail);
        },
        //调到第二步
        next(){
            this.first = false;
            this.second = true;
        },
        reviousrevious(){
            this.second = true;
            this.three = false;
        },
        //封面图
        handleAvatarSuccess(res,file) {
            if(res.status){
                this.coverImageSatus = true;
                this.formLabelAlign.coverImage = res.data;
            }
        },
        //发行商列表
        getList(){
            ajax('users',this.listParams).then((res) => {
                if(res.status === 200){
                    this.issueList = res.data.data;
                }else{
                    this.$message.error(json.message);
                }
            });
        },
        // //提交添加项目
        // submit(){
        //     if(this.formLabelAlign.content === ''){
        //          return this.$message.error('请输入项目内容');
        //     }
        //     this.formLabelAlign.carousels = JSON.stringify(this.formLabelAlign.carousels);
        //     ajax('movieEditForManager',this.formLabelAlign).then((res) => {
        //         console.log(res);
        //         if(res.data.status){
        //             this.three = true;
        //             this.first = false;
        //             this.second = false;
        //         }else{
        //             this.$message.error(res.data.message);
        //         }
        //     });
        // },
        //轮播图
        handleRotationSuccess(res) {
            if(res.status){
                this.carouselStatus = true;
                if(this.formLabelAlign.carousels.length < 5){
                    this.formLabelAlign.carousels.push(res.data);
                }else{
                    this.$message.error('最多上传5张');
                }
                
            }
        },
        delRotation(item,index){
            this.formLabelAlign.carousels.splice(index,1);
            // this.carouselStatus = false;
        },

        //通过审核
        goAdopt() {
            this.aportDialogVisible = true;
            this.checkParams.movieId = this.$route.params.movieId;
            this.checkParams.success = true;
        },
        cancel() {
            this.aportDialogVisible = false;
        },
        sure() {
            ajax('movieCheckForManager',this.checkParams).then((res) => {
                if(res.data.status){
                
                this.$message({
                    message: '通过成功!',
                    type: 'success'
                });
                this.aportDialogVisible = false;
                location.reload();
                }
            });
        },

        //拒绝
        refuse(item) {
            this.refuseDialogVisible = true;
            this.checkParams.movieId = this.$route.params.movieId;
            this.checkParams.success = false;
        },
        cancelrefuse() {
            this.refuseDialogVisible = false;
        },

        surerefuse() {
            if(this.checkParams.failedReason === ''){
                return this.$message({
                    message: '拒绝原因不能为空',
                    type: 'success'
                });
            }
            ajax('movieCheckForManager',this.checkParams).then((res) => {
                if(res.data.status){
                this.$message({
                    message: '拒绝成功!',
                    type: 'success'
                });
                this.refuseDialogVisible = false;
                location.reload();
                }
            });
        }

    },
    mounted(){
        this.getList();
        this.getData();
    },
    components:{
        Tinymce,
        threeTinymce
    }
}
</script>


<style lang="less" scoped>
.examine{
    padding: 2rem;
    display:flex;
    .oneExamine{
        width: 100%;
    }
    .firstBox{
        display: flex;
        .el-form{
            width: 100%;
            .fixedWidth{
               width: 48%;
            }
        }
    }
    .rotationList{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        .imgList{
            margin: 0 .5rem .5rem 0;
            div{
                width: 321px;
                height: 182px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            p{
                text-align: center;
                color: red;
                font-size: 14px;
                cursor: pointer;
            }
        }
    }
    .btn{
        margin: 2rem 0 0 0;
        .adopt{
            margin-right: 1rem;
        }
        button[type="button"]{
            width: 7%;
        }
    }

    .success{
        width: 15rem;
        text-align: center;
        margin: 0 auto;
        .iconfont{
            font-size: 7rem;
            color: #1e98ea;
        }
    }
    .cover{
        .imgBox{
            width: 90px;
            height: 133px;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }

    .moneyItem{
        display: flex;
        .el-input{
            width: 48%;
        }
        span{
            margin-left: 1rem;
        }
    }

    .box{
        display: flex;
        .examineProcess{
            margin: 0 1rem;
        }
    }

    .financing{
        display: flex;
        .el-select{
            width: 48%;
            margin-right: 1rem;
        }
        
        .el-input{
            width: 48%;
            margin-right: 1rem;
        }
        >.el-textarea{
            width: 48%;
            margin-right: 1rem;
        }
        div:last-child{
            p{
                margin: 0;
                span:first-child{
                    color: #aaa;
                }
            }
        }
        .el-radio-group{
            width: 49%;
            padding-top: .7rem;
        }
        .textareaDiv{
            width: 50%;
            p{
                display: flex;
                span{
                    width: 4rem;
                }
            }
        }

        .upload{
            width: 48%;
            margin-right: 1rem;
        }
        .item:first-child{
            width: 48%;
            display: flex;
        }
        .priceOfUnit{
            width: 91%;
        }

    }

    .tinymceBox{
        width: 100%;
    }

  

}
</style>
